<!-- 40 -->
<template>
  <div  class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      group="dailyPCPlan"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
            <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
        <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option value="ARRAY">ARRAY</a-select-option>
            <a-select-option value="CF">CF</a-select-option>
        </a-select>
      </a-form-item>
        <a-form-item :label="$t('T9_date')" name="Date" prop="Date">
          <a-date-picker
          class="t9-form-wideget-date-picker"
              :show-time="{ format: 'HH:mm:ss' }"
              v-model:value="dataForm.Date"
              format="YYYY-MM-DD HH:mm:ss"
              @ok="onChange"
            /> {{}}07:30~{{}}07:30
        </a-form-item>
    </t-query-form>
      <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_dailyPlanList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" :loading="dailyPlanListLoading" @click="dailyPlanListExport" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div>
      <t-table align="center" :loading="searchBtnLoading" :data="list.dailyPlanDate"  max-height="100%"  @radio-change="handleCheckChange">
     <t-column type="checkBox" width="60" :title="$t('T9_select')"></t-column>
      <t-column field="no" :title="$t('T9_no')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="productVer" :title="$t('T9_productVer')" />
      <t-column min-width="100" field="sourcePart" :title="$t('T9_sourcePart')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="cstQty'" :title="$t('T9_cstQty')" />
      <t-column min-width="100" field="glassQty" :title="$t('T9_glassQty')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="planState" :title="$t('T9_planState')" />
      <t-column min-width="100" field="releasedQty" :title="$t('T9_releasedQty')" />
      <t-column min-width="100" field="eventUser" :title="$t('T9_eventUser')" />
    </t-table>
   </div>
   <div style="display: flex; justify-content: space-between; width: 100%" class="page-wrap-table">
     <div style="width: 40%; maegin-right: 4px;">
        <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="17" class="global-oper-row-title">{{
        $t("T9_dailyPlanDetailList")
      }}</a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default t9-form-wideget-btn-margin-right" type="primary">{{ $t("T9_remove") }}</a-button>
      </a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table"  style="height: 100%">
      <t-table align="center" :loading="searchBtnLoading" :data="list.tableData"  max-height="100%"  @radio-change="handleCheckChange">
     <t-column type="radio" width="60"></t-column>
      <t-column min-width="100" field="planId" :title="$t('T9_planId')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="productVer" :title="$t('T9_productVer')" />
      <t-column min-width="100" field="sourcePart" :title="$t('T9_sourcePart')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="glassQty'" :title="$t('T9_glassQty')" />
      <t-column min-width="100" field="releasedQty" :title="$t('T9_releasedQty')" />
      <t-column min-width="100" field="reservedEqId" :title="$t('T9_reservedEqId')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="planState" :title="$t('T9_planState')" />
      <t-column min-width="100" field="type" :title="$t('T9_type')" />
    </t-table>
   </div>
     </div>
     <div style="width: 19%" >
        <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_dailyPlan")
      }}</a-col>
    </a-row>
     <a-form
     class="data-form"
          ref="form"
          layout="inline"
          :colon="false"
          :model="form"
          :rules="rules4"
        >
          <a-form-item :label="$t('T9_productId')" name="productId" prop="productId" style="width:100%">
            <a-select
          v-model:value="form.productId"
          :placeholder="$t('common_pleaseSelect')"
           allow-clear
           show-search
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.productIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
          </a-form-item>
           <a-form-item :label="$t('T9_productVer')" name="productVer" prop="productVer" style="width:100%">
          <a-input  class="t9-form-wideget-input-default" v-model:value="form.prodectVer" :disabled="true" />
          </a-form-item>
           <a-form-item :label="$t('T9_sourcePart')" name="sourcePart" prop="sourcePart" style="width:100%">
            <a-select
          v-model:value="form.sourcePart"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
          </a-form-item>
           <a-form-item :label="$t('T9_owner')" name="owner" prop="owner" style="width:100%">
            <a-select
          v-model:value="form.owner"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
          </a-form-item>
           <a-form-item :label="$t('T9_gls')" name="gls" prop="gls" style="width:100%">
             <a-input  class="t9-form-wideget-input-default" v-model:value="form.gls" type="number" />
          </a-form-item>
           <a-form-item :label="$t('T9_experimentNo')" name="experimentNo" prop="experimentNo" style="width:100%;">
             <a-input  class="t9-form-wideget-input-default" v-model:value="form.experimentNo" allow-clear />
          </a-form-item>
          <div style="justify-content: space-between;display: flex; width: 100%">
            <span></span>
        <a-button  class="t9-form-wideget-btn-default" type="primary">{{ $t("T9_add")}}</a-button>
          </div>
        </a-form>
         <div style="justify-content: center;display: flex; width: 100%">
          <t-icon type="xiayibufangxiangwangqianchukouxiangyou" style="font-size: 24px; color: #1740DC;" />
        </div>
         <div style="justify-content: center;display: flex; width: 100%">
          <t-icon type="fanhuishangyibufangxianghuituichukouxiangzuo" style="font-size: 24px; color: #1740DC;"  />
        </div>
       </div>
       <div style="width: 40%">
        <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="6" class="global-oper-row-title">{{
        $t("T9_unPackerAssign")
      }}</a-col>
      <a-col :span="13">
        <a-form
          ref="updateForm"
          layout="inline"
          :colon="false"
          :model="updateForm"
          :rules="rules3">
       <a-form-item :label="$t('T9_unpacker')" name="unpacker" prop="unpacker">
            <a-select
          v-model:value="updateForm.unpacker"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="t9-form-wideget-input-default"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
         <a-button  class="t9-form-wideget-btn-default" type="primary" style="margin-left: 2px;">{{ $t("T9_update") }}</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="4" class="global-oper-row-extra">
        <a-button  class="t9-form-wideget-btn-default" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table" style="height: 100%">
      <t-table align="center" :loading="searchBtnLoading" :data="list.tableData"  max-height="100%"  @radio-change="handleCheckChange">
     <t-column type="checkBox" width="60" :title="$t('T9_select')"></t-column>
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="sourcePart" :title="$t('T9_sourcePart')" />
      <t-column field="owner" :title="$t('T9_owner')" />
      <t-column field="state" :title="$t('T9_state')" />
      <t-column field="glassQty" :title="$t('T9_glassQty')" />
      <t-column field="reservedOrder" :title="$t('T9_reservedOrder')" />
      <t-column field="shopId" :title="$t('T9_shopId')" />
    </t-table>
   </div>
     </div>
   </div>
    <div class='data-form page-wrap-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_comment')" name="eventComment" prop="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" :rows="1" :title="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button type="primary"  :loading="confirmBtnLoading" @click="handleConfirm">{{ $t('T9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
   import confirmUserMixin from '@/mixins/confirmUser.mixin'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'dailyPCPlan',
    mixins: [initOptionsMixin, confirmUserMixin],
    data() {
      return {
        export: false,
        searchBtnLoading: false,
        confirmBtnLoading: false,
        dailyPlanListLoading: false,
        list: {
          dailyPlanDate: [],
          subEqpData: []
        },
        queryForm: {
          shopId: 'ARRAY',
          Date: undefined
        },
        dataForm: {
          eventComment: ''
        },
        form: {
          productId: undefined,
          gls: 1,
          productVer: undefined,
          sourcePart: undefined,
          owner: undefined,
          experimentNo: undefined
        },
        updateForm: {
          unpacker: undefined
        },
        options: {
          shopIdList
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
           Date: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          eventComment: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }]
        },
        rules3: {
          unpacker: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules4: {
          productId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          sourcePart: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          owner: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          gls: [{ required: true, message: this.$t('valid_required2'), trigger: 'blur' }]
        }
      }
    },
    watch: {

    },
    created() {
      this.initOptions([{ name: 'productId', params: { shopId: this.queryForm.shopId, version: '80039' } }])
    },
    methods: {
      moment,
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            this.getList()
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
       getGlassList() {
            const params = {
             ...this.queryForm,
             queryId: 'GetProductList',
             version: this.queryForm.shopId === 'CF' ? '90013' : '90034',
             menuName: 'rework',
             usage: 'getGlassList',
             site: 'T7',
             export: this.export
            }
            api
              .getList(params)
              .then((res) => {
                if (this.export) {
                  downloadBlobFile(res, 'dailyPlanList')
                  this.export = false
                  this.glassListLoading = false
                } else {
                this.list.glassData = res
                this.searchBtnLoading = false
                }
              })
              .catch((error) => {
                this.searchBtnLoading = false
                this.export = false
                this.glassListLoading = false
                console.error(error)
              })
         },
          dailyPlanListExport() {
         if (!this.list.dailyPlanData.length) return
         if (this.dailyPlanListLoading) return
         this.export = true
         this.getList()
       }
    }
  })
</script>
<style lang='less' scoped>
.t9-form-wideget-input-default {
    width: 150px;
}
</style>
